<template>
  <div
    v-magnifier
    class="img-wrap"
    :style="{
      width: imgWidth + 'px',
      height: imgHeight + 'px'
    }"
  >
    <a
      :href="link"
      class="mag-wrap"
      :target="blank ? '_blank' : ''"
      :style="{
        width: magWidth + 'px',
        height: magHeight + 'px'
      }"
    >
      <img
        class="mag-img"
        :src="imgUrl"
        :alt="imgAlt"
        :style="{
          width: imgWidth + 'px',
          height: imgHeight + 'px'
        }"
      />
    </a>
    <a
      :href="link"
      class="img-lk">
      <img
        :src="imgUrl"
        :alt="imgAlt"
        class="static-img">
    </a>
  </div>
</template>

<script lang="ts">
import {magnifier} from '@/derectives/index'

export default {
  name: "Magnifier",
  props: {
    link: {
      type: String,
      default: ''
    },
    imgUrl: {
      type: String,
      default: ''
    },
    imgAlt: {
      type: String,
      default: ''
    },
    imgWidth: {
      type: Number,
      default: 100
    },
    imgHeight: {
      type: Number,
      default: 100
    },
    magWidth: {
      type: Number,
      default: 100
    },
    magHeight: {
      type: Number,
      default: 100
    },
    blank: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    magnifier
  }
}
</script>

<style scoped lang="scss">
.img-wrap {
  position: relative;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px #999;

  .static-img {
    width: 100%;
  }
  .mag-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 0 0 3px #ccc;
    border-radius: 50%;
    cursor: move;
    overflow: hidden;
    &.show {
      display: block;
      transform: scale(1.5);
    }

    .mag-img {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>